<template>
  <div id="app">
    <!-- button组件 -->
    <!-- <div class="row">
      <t-button>默认按钮</t-button>
      <t-button @click="handleClick" type="primary">主要按钮</t-button>
      <t-button type="danger" icon='test-icon-delete'>危险按钮</t-button>
      <t-button type="success">成功按钮</t-button>
      <t-button type="info">信息按钮</t-button>
      <t-button type="warning">警告按钮</t-button>
    </div>
    <div class="row">
      <t-button plain>默认按钮</t-button>
      <t-button plain type="primary">主要按钮</t-button>
      <t-button plain type="danger">危险按钮</t-button>
      <t-button plain type="success">成功按钮</t-button>
      <t-button plain type="info">信息按钮</t-button>
      <t-button plain type="warning">警告按钮</t-button>
    </div>
    <div class="row">
      <t-button plain round>默认按钮</t-button>
      <t-button plain round type="primary">主要按钮</t-button>
      <t-button plain round type="danger">危险按钮</t-button>
      <t-button plain round type="success">成功按钮</t-button>
      <t-button plain round type="info">信息按钮</t-button>
      <t-button plain round type="warning">警告按钮</t-button>
    </div>
    <div class="row">
      <t-button plain circle>拆</t-button>
      <t-button plain circle type="primary">拆</t-button>
      <t-button plain circle type="danger">拆</t-button>
      <t-button plain circle type="success">拆</t-button>
      <t-button plain circle type="info">拆</t-button>
      <t-button plain circle type="warning">拆</t-button>
    </div>
    <div class="row">
      <t-button plain circle icon='test-icon-search'></t-button>
      <t-button plain circle icon='test-icon-edit' type="primary"></t-button>
      <t-button plain circle icon='test-icon-check' type="danger"></t-button>
      <t-button plain circle icon='test-icon-message' type="success"></t-button>
      <t-button plain circle icon='test-icon-star' type="info"></t-button>
      <t-button plain circle icon='test-icon-delete' type="warning"></t-button>
    </div> -->
    <!-- <div class='row'>
      <t-button>默认</t-button>
      <t-button size='medium'>medium</t-button>
      <t-button size='small'>small</t-button>
      <t-button size='mini'>mini</t-button>
    </div> -->
    <!-- dialog组件 -->
    <!-- <t-button type='primary' @click="visible=true">点我</t-button>
    <t-dialog :visible.sync='visible' :close-on-press-escape='false' :show-close='true' :close-on-click-modal='false'>
      <template v-slot:title>你是个小垃圾</template>
      <template v-slot:footer>
         <t-button @click='visible=false'>取消</t-button>
          <t-button type="primary" @click='visible=false'>确定</t-button>
      </template>
    </t-dialog> -->
    <!-- 测试vue中的动画 -->
    <!-- <transition name='t'>
      <div v-show='isShow'>这是一段文本</div>
    </transition> -->
    <!-- input组件-->
    <t-input width='30%' placeholder='请输入用户名' name='username' clearable v-model='username'></t-input>
    <t-input width='30%' type='password' placeholder='请输入密码' name='password'  v-model='password' show-password></t-input>
    <!-- <t-input placeholder='请输入密码' type='password' name='password'></t-input> -->
    <!-- <t-input v-model='msg' @change='handleChange' @blur='handleBlur' @focus='handleFocus'></t-input> -->
    <!-- t-input使用v-model等价于下面的写法 -->
    <!-- <t-input :value='msg' @input='msg=$event.target.value'></t-input> -->
    <!-- <input type="text" v-model='msg'> -->
    <!-- input使用v-model等价于下面这种写法 -->
    <!-- <input :value='msg' @input="msg=$event.target.value"> -->
  </div>
</template>
<script>
export default {
  data () {
    return {
      visible: true,
      isShow: true,
      username: '',
      password: ''
    }
  },
  methods: {
    // 如果上面handleClick写了括号，参数都是由当前函数调用传来的
    // 如果没有写括号，则参数是由子组件内部传来的
    // 总结：写了括号参数是由函数调用传递的，没写括号是子组件传递的
    handleClick (e) {
      console.log(e)
    },
    handleChange (value) {
      console.log(value)
    },
    handleBlur (e) {
      console.log('失去焦点')
    },
    handleFocus (e) {
      console.log('获取焦点')
    }
  }
}
</script>
<style lang="scss">
.row {
  margin: 10px;
}
// 使用过渡
// .t-enter {
//   opacity: 0;
// }
// .t-enter-to {
//   opacity: 1;
// }
// .t-enter-active {
//   transition: 0.5s;
// }
// .t-leave {
//   opacity: 1;
// }
// .t-leave-to {
//   opacity: 0;
// }
// .t-leave-active {
//   transition: 0.5s;
// }
// 使用动画
@keyframes dong {
  0% {
    opacity: 0;
  }
  100% {
    opactiy:1
  }
}
.t-enter-active {
  animation: dong 2s;
}
.t-leave-active {
  animation: dong 2s reverse;
}
</style>
